<template>
<div class="about">
  <!-- 自动读取count对象中的value属性 -->
  <h2>count: {{count}}</h2>
  <h2>count2: {{count2}}</h2>
  <h2>count3: {{count3}}</h2>
  <button @click="update">增加</button>
</div>
</template>

<script lang="ts">
import {
  ref,
  computed
} from 'vue'

export default {
  name: 'About',

  beforeCreate() {
    // console.log('beforeCreate()')
  },

  // 向模板提供响应式数据和函数
  setup () {
    // console.log('setup()', this) // this不可用

    // 创建一个ref响应式对象, 内部包含一个动态的value
    const count = ref(2)
    // console.log(count)

    // 定义计算属性
    // 只有getter
    const count2 = computed(() => {
      console.log('count2 computed')
      return count.value * 2
    })
    console.log(count2)

    // 有getter和setter
    const count3 = computed({
      get () {
        console.log('count3 get')
        return count.value * 3
      },
      set (value) {
        console.log('count3 set', value)
        // 没有更新count的value, 所以显示的count3没有变化
        // count.value = 6
      }
    })


    // 用于更新响应式数据的函数
    const update = () => {
      count.value += 1  // js代码中不能省略.value
      count3.value = 4
    }

    return { // 对象中的所有属性和方法, 模板可以直接使用
      count,
      count2,
      count3,
      update
    }
  }
}
</script>
